import { createStyles, Theme, withStyles } from "@material-ui/core/styles";
import { WithStyles } from "@material-ui/core/styles/withStyles";
import { Avatar, Card } from "antd";
import * as React from "react";
import doctorImage from "../../images/doctor_bg.png";
import { DoctorData } from "../../type/DoctorData";

const styles = (theme: Theme) =>
  createStyles({
    root: {},
    title: {
      "& span": {
        fontSize: "14px",
        marginLeft: "10px"
      }
    },
    cardMiddle: {
      marginBottom: "20px",
      "& span": {
        color: "#1990ff",
        marginRight: "20px"
      }
    }
  });

interface Iprops extends WithStyles<typeof styles> {
  data: DoctorData;
}
/**
 * 医生详情的卡片
 */
class DoctorCard extends React.Component<Iprops> {
  public render() {
    const { classes, data } = this.props;
    return (
      <Card
        hoverable={true}
        bodyStyle={{
          backgroundColor: "rgb(245,251,255)",
          borderRadius: "5px"
        }}
      >
        <Card.Meta
          avatar={<Avatar size={150} src={doctorImage} />}
          title={
            <span className={classes.title}>
              {data.name}
              <span>{data.title}</span>
            </span>
          }
          description={
            <div>
              <div className={classes.cardMiddle}>
                <span>{data.hospitalName}</span>
                <span>{data.depart}</span>
              </div>
              <div>
                <p>
                  <span>{"擅长："}</span>
                  {data.introduction}
                </p>
                <p>
                  <span>{"简介："}</span>
                  {data.detail}
                </p>
              </div>
            </div>
          }
        />
      </Card>
    );
  }
}

export default withStyles(styles)(DoctorCard);
